<template>
  <div class="data-panel">
    <back-button @click="backAction" />
    <div class="data-panel-center button-grid">
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('script')">脚本设计</cg-button>
      </div>
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('skill')">技能设计</cg-button>
      </div>
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('item')">物品设计</cg-button>
      </div>
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('role')">角色设计</cg-button>
      </div>
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('mission')">关卡设计</cg-button>
      </div>
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('instance')">副本设计</cg-button>
      </div>
      <div class="button-grid-item">
        <cg-button variant="outline" @click="routeAction('material')">素材管理</cg-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import backButton from "../../common/components/back-button.vue";

import { useRouter } from "vue-router";

defineOptions({
  name: "data-panel",
});

const router = useRouter();

const routeAction = (name: string) => {
  router.push("/data/" + name);
};

const backAction = () => {
  router.back();
};
</script>

<style lang="scss">
.data-panel {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .button-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .button-grid-item {
      display: inline-block;
      width: 25vw;
      height: 4rem;
      padding: 2px;

      button {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
